<template>
    <view class="byt-aidialogue-tabbar byt-aidialogue-bg--float">
        <view
            class="byt-aidialogue-tabbar__box"
            :style="{
                bottom: inputOffsetBottom > 0 ? inputOffsetBottom + 8 + 'px' : '8px'
            }"
        >
            <view class="byt-aidialogue-tabbar__content">
                <view class="byt-aidialogue-tabbar__content-input">
                    <template v-if="audioShow">
                        <view class="byt-aidialogue-tabbar__content-input__audio">
                            <basic-icon size="56rpx" name="https://img.yummall.cn/baiyetong/byt-uni-ui/audio.svg" v-if="!microphoneAgent" @click="startCount += 1"></basic-icon>
                            <basic-icon size="56rpx" name="https://img.yummall.cn/baiyetong/byt-uni-ui/keyboard.svg" v-else @click="microphoneAgent = false"></basic-icon>
                        </view>
                        <view class="byt-aidialogue-tabbar__content-input__textarea" :style="{ display: microphoneAgent ? 'block' : 'none' }">
                            <Audio
                                :microphone="microphoneAgent"
                                :message="messageAgent"
                                :startCount="startCount"
                                @changeMicrophone="(e) => (microphoneAgent = e)"
                                @changeMessage="(e) => (messageAgent = e)"
                            />
                        </view>
                    </template>
                    <view class="byt-aidialogue-tabbar__content-input__textarea" :style="{ display: !microphoneAgent ? 'flex' : 'none' }">
                        <!-- :adjust-position="true" 是否键盘弹起上推页面 -->
                        <textarea
                            class="byt-aidialogue-tabbar__content-input__textarea__inner"
                            auto-height
                            :style="!messageAgent ? 'height: 48rpx;' : 'height:auto;'"
                            v-model="messageAgent"
                            maxlength="-1"
                            :cursor-spacing="17"
                            placeholder=" "
                            :adjust-position="true"
                            @focus="onFocus"
                        />
                        <view class="byt-aidialogue-tabbar__content-input__textarea__confirm" :style="{ background: messageAgent ? '#26a5ff' : '#ebebeb', position: 'relative' }">
                            <zeroLoading v-if="loading" color="#26a5ff" textGap="0rpx" type="surround" position="absolute"></zeroLoading>
                            <basic-icon size="30rpx" name="https://img.yummall.cn/baiyetong/byt-uni-ui/send.svg" @click="setMessage"></basic-icon>
                        </view>
                    </view>
                </view>
            </view>
            <view class="safe-bottom"></view>
        </view>
    </view>
</template>

<script>
// import { BasicIcon } from '../../basic';
// 图标
import BasicIcon from '../../basic/basic-icon/basic-icon.vue';
import Audio from './components/Audio/Audio.vue';
import zeroLoading from './components/zero-loading/components/zero-loading/zero-loading.vue';
export default {
    components: {
        Audio,
        BasicIcon,
        zeroLoading
    },
    name: 'Sender',
    emits: ['update:message', 'update:microphone', 'focus', 'submit'],
    props: {
        // 是否开启语音功能
        audioShow: {
            type: Boolean,
            default: true
        },
        // 是否切换到语音输入
        microphone: {
            type: Boolean,
            default: false
        },
        // 消息内容
        message: {
            type: String,
            default: ''
        },
        // 消息回答等待loading
        loading: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            inputOffsetBottom: 0,
            startCount: 0
        };
    },
    computed: {
        // 消息代理
        messageAgent: {
            get() {
                return this.message;
            },
            set(val) {
                this.$emit('update:message', val);
            }
        },
        // 语音和文字输入切换
        microphoneAgent: {
            get() {
                return this.microphone;
            },
            set(val) {
                this.$emit('update:microphone', val);
            }
        }
    },
    async mounted() {
        let _this = this;
        // 监听键盘高度变化，以便设置输入框的高度
        //  #ifndef H5
        uni.onKeyboardHeightChange((res) => {
            console.log('获取高度', res);
            _this.inputOffsetBottom = res.height;
            _this.toBottom();
            if (res.height === 0) {
                _this.focus = false;
            }
        });
        // #endif
    },
    methods: {
        onFocus() {
            this.$emit('focus');
        },
        setMessage() {
            this.$emit('submit');
        }
    }
};
</script>

<style lang="scss" scoped>
view {
    box-sizing: border-box;
}

@include b(aidialogue-tabbar) {
    // #ifndef H5
    height: calc(120rpx + env(safe-area-inset-bottom));
    // #endif
    // #ifdef H5
    height: calc(160rpx);
    // #endif
    position: relative;

    @include e(box) {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 99;
        border-radius: 12px 12px 0px 0px;

        // &.is-min {
        //     background: rgba(255, 255, 255, 0.7);
        // }
    }

    @include e(content) {
        max-width: 1800rpx;
        margin: 0 auto;

        @include eb(input) {
            display: flex;
            align-items: center;
            padding: 16rpx 24rpx;

            @include e(audio) {
                margin-right: 28rpx;
            }

            @include e(textarea) {
                flex-grow: 1;
                min-height: 80rpx;
                border-radius: 88rpx;
                border: 4rpx solid transparent;
                // background-clip: padding-box, border-box;
                // background-origin: padding-box, border-box;
                // background-image: linear-gradient(to right, #fff, #fff), linear-gradient(to left, #5ee1fcff, #9caaf6ff, #9e8cf6ff, #5d8bfdff);
                background: rgba(255, 255, 255, 0.8);
                border: 2px solid #9e8cf6ff;
                border-radius: 44rpx;
                box-sizing: content-box;
                display: flex;
                justify-content: space-between;
                align-items: center;

                @include e(inner) {
                    min-height: 48rpx;
                    max-height: 600rpx;
                    overflow-y: auto;
                    padding: 16rpx 24rpx;
                    box-sizing: content-box;
                    border-radius: 80rpx;
                    width: calc(100% - 32rpx - 80rpx);
                    line-height: 48rpx;
                    font-size: 28rpx;

                    // &::placeholder {
                    // 	line-height: 48rpx;
                    // }
                }

                @include e(confirm) {
                    width: 56rpx;
                    height: 56rpx;
                    margin-right: 18rpx;
                    background-color: #26a5ff;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
    }
}
</style>
